<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 输入bs3-cdn:css -->
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div id="app" class="container"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { Component } = React;

      class Product extends Component {
        // bs3-card-background 输入这个 ，就能找到对应的bootstrap组件
        render() {
          const { product } = this.props;
          return (
            <div className="card text-white bg-primary">
              <img
                className="card-img-top"
                src={product.coverImg}
                alt=""
                style={{ width: "80px", height: "80px" }}
              />
              <div className="card-body">
                <h4 className="card-title">{product.name}</h4>
                <p className="card-text">{product.price}</p>
              </div>
            </div>
          );
        }
      }

      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            list: [],
            page: 1,
          };
        }
        componentDidMount() {
          this.loadMore();
        }
        loadMore() {
          fetch("http://localhost:3009/api/v1/products?page=" + this.state.page)
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.setState({
                list: [...this.state.list, ...res.products],
                page: this.state.page + 1,
              });
            });
        }
        render() {
          const { list } = this.state;
          return (
            <div className="row">
              {list.map((item) => {
                return (
                  <div key={item._id} className="col-md-4">
                    <Product product={item} />
                  </div>
                );
              })}
              <button onClick={() => this.loadMore()}>点击加载更多</button>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
